<template>
  <div class='show'>
    <!-- 顶部组件 -->
    <div class="top title_padding">
      <div>定位</div><input type="text">
    </div>
    <!-- 分类 -->
    <div class="categories title_padding">
      <van-grid
        :column-num="5"
        square
      >
        <van-grid-item
          v-for="grid in grids1"
          :key="grid.id"
          :icon="grid.src"
          :text="grid.title"
          :border="false"
          @click="goCategoriesAll"
        />
      </van-grid>
    </div>
    <!-- 今日必抢 -->
    <div class="today title_padding">
      <img
        src=""
        alt=""
      >
      <div
        class="today_more"
        @click="goTodayMore"
      >
        <span>更多必抢</span>
        <img
          src="https://static.meituan.net/bs/myfe/wxapp/file/images/show/common/arrow-right.png"
          alt=""
        >
      </div>
    </div>
    <!-- 今日必抢内容 -->
    <div class="today_content">
      <div class=""></div>
      <van-grid :column-num="3">
        <van-grid-item
          v-for="todaygrid in todayshowlist"
          :key="todaygrid.performanceId"
          @click="goShowDetails(todaygrid.performanceId)"
        >
          <van-image :src="todaygrid.posterUrl" />
          <div class="tag tag-buy">
            <img
              src="https://p0.meituan.net/scarlett/fe4f7ed065dfa4f6832187ae6aca956b954.png"
              alt=""
              class="tag-icon"
            >
            <div>火热抢票中</div>
          </div>
          <div class="today-item-title title">{{todaygrid.name}}</div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 演出页中通banner -->
    <div>
      <!-- <Banner :bannerADlist=bannerADlist /> -->
      <div class="ad_container">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          :height="60"
          :duration="200"
        >
          <van-swipe-item
            v-for="ban in bannerADlist"
            :key="ban.id"
          >
            <img
              :src="ban.materialVOList[0].value"
              alt=""
              class="ad_img"
            >
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 大咖新动态 -->
    <div class="title_padding title_word">
      <div>大咖新动态</div>
    </div>
    <!-- 大咖列表 -->
    <div class="artist_list container_public">
      <div
        class="artist_item"
        v-for="artist in artistslist"
        :key="artist.id"
        @click="goArtistDetail()"
      >
        <div class="icon_contain">
          <img
            :src="artist.headUrl"
            alt=""
          >
        </div>
        <div class="icon_text">
          {{artist.celebrityName}}
        </div>
        <div class="icon_recommend">
          <div class="art_recommend">{{artist.recommendTag}}</div>
          <div
            class="dot"
            v-if="artist.updateType"
            @click.once="artist.updateType=!artist.updateType"
          ></div>
        </div>
      </div>
    </div>
    <!-- 什么值得看 -->
    <div class="title_padding title_word">
      <div>什么值得看</div>
    </div>
    <!-- 什么值得看榜单 -->
    <div class="look_list container_public">
      <div
        class="look_item"
        v-for="showtop in worthlookslist"
        :key="showtop.rankId"
        @click="goShowTops"
      >
        <div class="item_wrap">
          <div class="title_wrap">
            <div class="one-line title">{{showtop.title}}</div>
            <div class="one-line subtitle">{{showtop.shortTitle}}</div>
          </div>
          <div class="img_wrap">
            <img
              :src="showtop.coverUrl"
              alt=""
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 为你推荐 -->
    <div class="title_padding title_word">
      <div>为你推荐</div>
    </div>
    <!-- 推荐竖表 -->
    <div class="recommend_foryou">
      <Recommend :recommendlist=recommendlist />
    </div>
  </div>
</template>
<script>
import Recommend from '@/components/show/Recommend'
// import Banner from '@/components/show/Banner'
export default {
  data: () => ({
    grids1: [
      {
        id: 0,
        src: 'https://img.meituan.net/kylisean/0b75dadc2c87a8871d3edae5d41ba3005621.png@90w_90h_1c_1e',
        title: '演唱会'
      },
      {
        id: 1,
        src: 'https://img.meituan.net/kylisean/1220351db0fa63409d6a1ed5e1c36aad5255.png@90w_90h_1c_1e',
        title: '话剧歌剧'
      },
      {
        id: 2,
        src: 'https://img.meituan.net/kylisean/c34be1e95829ac1a43b862ac5ce52d735004.png@90w_90h_1c_1e',
        title: '休闲展览'
      },
      {
        id: 3,
        src: 'https://img.meituan.net/kylisean/f696cd570f32ad2a212d31170c5bfd455070.png@90w_90h_1c_1e',
        title: '戏曲相声'
      },
      {
        id: 4,
        src: 'https://img.meituan.net/kylisean/e4b3ae4ed2ff04d571c11dea1d2f10c74337.png@90w_90h_1c_1e',
        title: '亲子艺术'
      }
    ],
    todayshowlist: [],
    worthlookslist: [],
    artistslist: [],
    bannerADlist: [],
    recommendlist: []
  }),
  components: {
    Recommend
    // Banner
  },
  created() {
    this.getTodayShows()
    this.getWorthlooks()
    this.getArtists()
    this.getBannerADs()
    this.getRecommends()
  },
  methods: {
    async getTodayShows() {
      const res = await this.$http.getTodayShows()
      this.todayshowlist = res.data.todayshowlist
      console.log(this.todayshowlist)
    },
    async getWorthlooks() {
      const res = await this.$http.getWorthlooks()
      this.worthlookslist = res.data.worthlooklist
    },
    async getArtists() {
      const res = await this.$http.getArtists()
      this.artistslist = res.data.artlist
    },
    async getBannerADs() {
      const res = await this.$http.getBannerADs()
      this.bannerADlist = res.data[0].adVOList
      console.log(this.bannerADlist)
    },
    async getRecommends() {
      const res = await this.$http.getRecommends()
      this.recommendlist = res.data.performanceList
    },
    goArtistDetail() {
      this.$router.push('/show/artistdetail')
    },
    goCategoriesAll() {
      this.$router.push('/show/categoriesall')
    },
    goTodayMore() {
      this.$router.push('/show/todaymore')
    },
    goShowDetails(id) {
      console.log(id) // 168943
      this.$router.push({
        name: 'showDetails',
        params: { id }
      })
    },
    goShowTops() {
      this.$router.push('/show/showtops')
    }
  }
}
</script>
<style lang="scss">
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
.show {
  padding-bottom: 40px;
  background: #fff;
  [class*="van-hairline"]::after {
    border: none;
  }
  .title_padding {
    padding: 0.5rem 0.9375rem 0.5rem 1.125rem;
  }
  .title_word {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: left;
  }
  .container_public {
    display: flex;
    margin-left: 0.9375rem;
    overflow-x: auto;
  }
  .top {
    // background-color: pink;
    display: flex;
    align-items: center;
    height: 2rem;
    box-sizing: content-box;
    input {
      border: 0.005rem solid #b4b5b6;
      border-radius: 1rem;
    }
  }
  .categories {
    // background-color: skyblue;
    padding: 0.625rem;
    .van-grid-item__icon {
      font-size: 60px;
    }
    .van-grid-item__text {
      margin: 0;
    }
  }
  .today {
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    img {
      display: block;
      width: 79;
      height: 16px;
    }
    .today_more {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      width: 4.625rem;
      height: 1.375rem;
      background: #f5f5f5;
      border-radius: 0.6875rem;
      span {
        padding-right: 7px;
      }
      img {
        width: 0.3125rem;
        height: 0.375rem;
      }
    }
  }
  .today_content {
    // background-color: skyblue;
    padding: 0 0.9375rem;
    .van-grid {
      flex-wrap: nowrap;
      // background-color: hotpink;
    }
    .van-grid-item {
      display: flex;
      width: 6.875rem;
      margin-left: 0.5rem;
      .van-grid-item__content {
        padding: 0;
      }
    }
    .van-grid-item:first-child {
      margin-left: 0;
    }
    .van-grid-item__content--center {
      align-items: flex-start;
    }
    .van-image {
      border-radius: 5px;
      overflow: hidden;
    }
    .tag {
      display: flex;
      align-items: center;
      height: 1rem;
      overflow: hidden;
      background-color: #ff0b0b;
      padding: 0 0.1875rem 0 0;
      border-radius: 0.25rem;
      font-weight: 700;
      font-size: 0.625rem;
      color: #fff;
      margin-top: 0.25rem;
      .tag-icon {
        width: 1rem;
        height: 1rem;
      }
    }
    .tag-buy {
      background: linear-gradient(135deg, #ff7142, #ff0b0b);
    }
    .today-item-title {
      margin-top: 0.25rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: #333;
      line-height: 1.125rem;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .title {
      margin-top: 0.25rem;
      font-size: 0.8125rem;
      font-weight: 700;
      color: #333;
      line-height: 1.125rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  // 大咖新动态
  .artist_list {
    margin-left: 0.6875rem;
    display: flex;
    overflow-x: auto;
  }
  .artist_item {
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    text-align: center;

    width: 4.875rem;
    margin: 0.125rem 0.75rem 0 0;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon_contain {
      img {
        height: 3.125rem;
        width: 3.125rem;
        display: inline-block;
        border-radius: 100%;
      }
    }
    .icon_text {
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 4.375rem;
      height: 1.0625rem;
      font-weight: 700;
      color: #333;
      line-height: 1.0625rem;
    }
    .icon_recommend {
      display: flex;
      .art_recommend {
        margin-top: 0.125rem;
        text-align: center;
        height: 1rem;
        font-size: 0.6875rem;
        color: #999;
        line-height: 1rem;
        max-width: 4.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dot {
        margin: 0.25rem 0 0 0.125rem;
        border-radius: 0.125rem;
        width: 0.25rem;
        height: 0.25rem;
        background: linear-gradient(140deg, #ff7979, #f04444);
      }
    }
  }
  // 演出页中通banner
  .ad_container {
    margin: 1.5625rem 0.9375rem 0;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      border-radius: 6px;
      background-color: #39a9ed;

      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .ad_img {
      width: 100%;
      cursor: pointer;
    }
  }
  // 什么值得看
  .look_list {
    .look_item {
      flex-shrink: 0;
      padding-right: 0.5rem;
    }
    .item_wrap {
      display: flex;
      flex-direction: column;
      width: 6.25rem;
      height: 11.4375rem;
      border-radius: 0.375rem;
      background: rgb(178, 90, 89);
      .title_wrap {
        flex: 1;
        padding: 0.4375rem 0 0 0.5625rem;
        color: #fff;
        text-align: left;
        .one-line {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .title {
          font-size: 0.875rem;
          font-weight: 700;
          height: 1.25rem;
          line-height: 1.25rem;
        }
        .subtitle {
          font-size: 0.75rem;
          height: 1.0625rem;
          line-height: 1.0625rem;
        }
      }
      .img_wrap {
        height: 8.3125rem;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0 0 0.375rem 0.375rem;
        }
      }
    }
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>
